<!--
* @description 论坛列表
* @fileName bbs_list.vue
* @author huangyu
* @date 2023/04/21 09:25:17
!-->
<template>
    <div>
        <div style="margin-bottom:20px;">
            <el-button type="primary" @click="clickAdd">新增帖子</el-button>
        </div>
        <el-table :data="list" max-height="650px" border>
            <el-table-column label="类型" width="120">
                <template slot-scope="scope">
                    <div class="color_blue" v-if="scope.row.type==5||scope.row.type==2">{{scope.row.typeStr}}</div>
                    <div class="color_warning" v-else>{{scope.row.typeStr}}</div>
                </template>
            </el-table-column>
            <el-table-column label="帖子主题" prop="title">
                <template slot-scope="scope">
                    <router-link :to="`/game/zx/bbs/detail?id=${scope.row._id}`" class="bbsTitle" target="_blank">
                        <span :class="scope.row.topNumber>0?'color_danger':''">{{scope.row.title}}</span>
                    </router-link>
                    &nbsp;&nbsp;<el-tag type="danger" size="mini" v-if="scope.row.topNumber>0">置顶</el-tag>
                    &nbsp;&nbsp;<el-tag type="danger" size="mini" v-if="scope.row.zanNumber>15">热门</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="作者" width="280">
                <template slot-scope="scope">
                    {{scope.row.gameName}} / <span class="color_gray">{{scope.row.createTime | formatDate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="回复数" width="280" prop="replyCount"></el-table-column>
            <el-table-column label="最后发表" width="280">
                <template slot-scope="scope">
                    <div v-if="scope.row.lastGameName">{{scope.row.lastGameName}} / <span class="color_gray">{{scope.row.lastReplyTime | formatDate2}}</span></div>
                </template>
            </el-table-column>
            <el-table-column label="功能操作(管理员)" width="240" v-if="powerBBS">
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" plain @click="clickUpdate(scope.row,'top')">置顶{{scope.row.topNumber}}</el-button>
                    <el-button type="warning" v-if="scope.row.topNumber>0" size="mini" plain @click="clickClearTop(scope.row._id)">取消置顶</el-button>
                    <el-button type="danger" size="mini" plain @click="clickUpdate(scope.row,'del')">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

        <!--  -->
        <!-- 新增帖子 -->
        <el-dialog title="新增帖子" top="50px" :visible.sync="dialogBbsAdd" v-dialogDrag width="1200px">
            <vBbsAdd @addSuccess="addSuccess"></vBbsAdd>
        </el-dialog>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import vBbsAdd from "./bbs_add.vue"
import pagination from "@/components/common/pagination.vue";
import { formatDate } from '@/common/unit.js'
export default {
    components: { vBbsAdd,pagination },
    data() {
        return {
            token: this.$store.state.token,
            list: [],
            dialogBbsAdd: false,

            pageindex: 1,
            pagesize: 20,
            total: 0,

            powerBBS: this.$power.roleAction('bbs'),
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        clickAdd(){
            if(this.token){
                this.dialogBbsAdd = true
            }else{
                this.$message.error("请先登录!")
            }
        },
        getData(){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-list',
                data: {
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },
        // 置顶、删除功能操作
        clickUpdate(row,value){
            if(!this.token){
                this.$message.error("未登录，不能操作！")
                return;
            }
            let params = {
                type: 'getBbs',
                api: 'api-bbs-update',
                token: this.token,
                data: {
                    type: value,
                    _id: row._id,
                    topNumber: 1,
                    zanNumber: 1,
                    status: -1,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    this.$message.success("操作成功")
                    this.getData()
                }
            })
        },
        // 取消置顶
        clickClearTop(_id){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-update-clear-top',
                token: this.token,
                data: {
                    _id: _id,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    this.$message.success("操作成功")
                    this.getData()
                }
            })
        },
        addSuccess(){
            this.dialogBbsAdd = false
            this.getData()
        }
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            let res = formatDate(date, "yy-MM-dd");
            return res;
        },
        formatDate2(time) {
            var date = new Date(time);
            let res = formatDate(date, "yy-MM-dd hh:mm:ss");
            return res;
        },
    }
}
</script>

<style scoped>
.bbsTitle:hover{color:#409EFF;text-decoration: underline;}
</style>